<template>

<div class="system-info-container">
    <table class="system-table">
      <thead>
        <tr>
          <th colspan="4">系统基本信息</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>当前用户：</td>
          <td>{{ systemInfo.currentUser }}</td>
          <td>用户权限：</td>
          <td>{{ systemInfo.userPermission }}</td>
        </tr>
        <tr>
          <td>当前日期：</td>
          <td>{{ systemInfo.currentDate }}</td>
          <td>用户IP：</td>
          <td>{{ systemInfo.userIP }}</td>
        </tr>
        <tr>
          <td>当前版本：</td>
          <td>{{ systemInfo.currentVersion }}</td>
          <td>更新时间：</td>
          <td>{{ systemInfo.updateTime }}</td>
        </tr>
        <tr>
          <td>服务器端口：</td>
          <td>{{ systemInfo.serverPort }}</td>
          <td>操作系统：</td>
          <td>{{ systemInfo.operatingSystem }}</td>
        </tr>
      </tbody>
    </table>
  </div>




</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';



const message = ref('Hello, Vue 3!');
const systemInfo = ref({
  currentUser: '',
  userPermission: '',
  currentDate: '2021/05/08',
  userIP: '222.192.83.12',
  currentVersion: 'V5.2版',
  updateTime: '2020/02/27',
  serverPort: '8020',
  operatingSystem: 'Windows 10'
});


function personal() { 

    axios.get('http://127.0.0.1:8000/user/personal/',
        {
            headers: {
                'token':localStorage.getItem('token')
            }
        }
    )
    .then(res => {
        console.log(res)
        systemInfo.value={
            currentUser: res.data.data.username,
            userPermission: res.data.data.promiss,
            currentDate: '2021/05/08',
            userIP: '222.192.83.12',
            currentVersion: 'V5.2版',
            updateTime: '2020/02/27',
            serverPort: '8020',
            operatingSystem: 'Windows 10'
        }
    })
    .catch(err => {
        console.error(err); 
    })

 }




onMounted(() => {
    // Your code here
    personal()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>

<style scoped>
.system-info-container {
  width: 1000px;
  margin: 20px auto;
  padding: 15px;
}

.system-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.system-table th, .system-table td {
  border: 1px solid #050505;
  padding: 12px 15px;
  font-weight: bold; /* 所有字体加粗 */
}

.system-table thead th {
  background-color: #165DFF;
  color: white;
  font-size: 1.5em; /* 表头加大 */
  height: 80px;
}

.system-table tbody tr {
  height: 50px;
  transition: background-color 0.2s ease;
}

.system-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.system-table tbody tr:hover {
  background-color: #f1f3f5;
}
</style> 